import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import { PrismLight as SyntaxHighlighter } from '../../node_modules/react-syntax-highlighter';

// 设置高亮样式
import { xonokai } from '../../node_modules/react-syntax-highlighter/dist/esm/styles/prism';
// 设置高亮的语言
import { jsx, javascript, sass, scss, python, java, json } from '../../node_modules/react-syntax-highlighter/dist/esm/languages/prism';
class CodeBlock extends PureComponent {
    static propTypes = {
        value: PropTypes.string.isRequired,
        language: PropTypes.string
    };
    static defaultProps = {
        language: null
    };
    componentDidMount() {
        // 注册要高亮的语法，
        // 注意：如果不设置打包后供第三方使用是不起作用的
        SyntaxHighlighter.registerLanguage("jsx", jsx);
        SyntaxHighlighter.registerLanguage("javascript", javascript);
        SyntaxHighlighter.registerLanguage("sass", sass);
        SyntaxHighlighter.registerLanguage("scss", scss);
        SyntaxHighlighter.registerLanguage("python", python);
        SyntaxHighlighter.registerLanguage("java", java);
        SyntaxHighlighter.registerLanguage("json", json);
    }
    render() {
        const { language, value } = this.props;
        return (
            <figure className="highlight">
                <SyntaxHighlighter
                    language={language}
                    style={xonokai}
                    showLineNumbers={true}
                    lineNumberStyle={{ color: '#ddd', fontSize: '0.8rem' }}
                // wrapLines={true}
                >
                    {value}
                </SyntaxHighlighter>
            </figure>
        );
    }
}
export default CodeBlock;